#{extends 'main.html' /}
#{set title:'Home' /}

#{ifnot tasks}
    <p>No hay tareas</p>
#{/ifnot}
<ul>
    #{list items:tasks, as:'task'}
    <li>
        <input type="checkbox" id="${task.id}" ${task.done ? 'checked' : ''}/>
        ${task.title} 
    </li>
    #{/list}
</ul>
<a id="createTask" href="#">Crear una tarea</a>
<script language="javascript" type="text/javascript">
	$('#createTask').click(function(){
	    $.post('@{createTask()}', {title: prompt('Nombre de Tarea ?')}, function(task){
	        $('ul').prepend(
	     		  '<li><input type="checkbox" id="'+task.id+'"/>'+task.title+'</li>' 
	        )
	    }, 'json')
	})
	
	$('input').live('click', function(){
	    $.post('@{changeStatus()}', {id: $(this).attr('id'), done: $(this).val})
	})
</script>